<template>
  <div>
    <div class="top">
      <span class="font">  筛选查询 </span>
      <el-button class="button" size="medium" @click="selectSupply"
        >查询结果</el-button
      >
      <span class="dropdown" @click="drop">
        筛选查询<i class="el-icon-arrow-down"></i>
      </span>
    </div>
    <div class="dropmenu" :class="{ 'dropmenu-1': tab }">
      <span>输入搜索：</span>
      <input type="text" v-model="select.ve_name" placeholder="供货商名称" />
      <span>联系人员：</span>
      <input type="text" v-model="select.ve_contact" placeholder="全部" />
    </div>
    <div class="middle">
      <span class="font">  数据列表 </span>
      <!-- <el-select
        v-model="value2"
        multiple
        collapse-tags
        style="margin-left: 20px"
        placeholder="排序方式"
        class="select"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select> -->
      <el-select v-model="size" multiple placeholder="显示条数" class="select">
        <el-option v-for="item in options" :key="item" :value="item">
        </el-option>
      </el-select>
      <el-button class="button button-1" size="medium" @click="sks"
        >添加</el-button
      >
    </div>
    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column prop="ve_name" label="供货商名称"> </el-table-column>
        <el-table-column prop="ve_address" label="供货商地址">
        </el-table-column>
        <el-table-column prop="ve_contact" label="联系人"> </el-table-column>
        <el-table-column prop="ve_phone" label="联系电话"> </el-table-column>
        <el-table-column prop="Operate" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="sks(scope.row)"> 编辑 </el-button>
            <el-button type="text" @click="delSupply(scope.row.ve_id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom clear">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="page"
          :page-size="limit"
          @current-change="handerPage"
          style="float: right"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getSupplyApi,
  delSupplyApi,
  selectSupplyApi,
} from "@/http/merchant/supply";
export default {
  data() {
    return {
      tab: false,
      loading: true,
      tableData: [
        // {
        //   ve_name: "SupplierName",
        //   ve_address: "SupplierAddress",
        //   ve_contact: "Contact",
        //   ve_phone: "ContactNumber",
        // },
      ],
      select: {
        ve_contact: "",
        ve_name: "",
      },
      options: [5, 10, 15],
      limit: 5,
      page: 1,
      total: 0,
      // 改变页数
      size: "",
    };
  },
  activated() {
    this.init(this.limit, this.page);
  },
  methods: {
    // 初始化页面
    init(limit, page) {
      getSupplyApi(limit, page)
        .then((res) => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            this.total = res.data.totalCount;
            this.loading = false;
            return
          }
          throw new Error()
        })
        .catch((err) => {
          console.log(err);
           this.$message.error("初始化失败")
        });
    },

    // 删除
    delSupply(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(id);
          delSupplyApi(id)
            .then(() => {
              this.init(this.limit, this.page);
            })
            .catch((err) => {
              console.log("删除失败：", err);
            });

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //查询
    async selectSupply() {
      let data = await selectSupplyApi(this.select);
      if (data.data.code != 200) throw new Error("查询失败");
      this.tableData = data.data.data;
    },

    handerPage(page) {
      this.page = page;
      this.init(this.limit, page);
    },

    // 添加
    sks(data) {
      let id = data.ve_id ? data.ve_id : 0;
      let obj = data;
      if (id) {
        this.$router.push({ name: "system-2-4-1", query: { ...obj } });
      } else {
        this.$router.push({ name: "system-2-4-1" });
      }
    },
    drop() {
      this.tab = !this.tab;
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  background-color: #eee;
  border: 1px solid #ddd;
  border-bottom: none;

  & .font {
    line-height: 50px;
    float: left;
  }

  & .button {
    margin-top: 7px;
    float: right;
  }

  & .dropdown {
    line-height: 50px;
    float: right;
    margin: 0 50px;
    cursor: pointer;
  }
}

.dropmenu {
  padding: 0 20px 0;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  background-color: #fff;
  border: 1px solid #ddd;
  transition: all 0.5s;
  overflow: hidden;

  & span {
    margin: 4px 10px 0 100px;
  }

  & input {
    margin-top: 4px;
    width: 250px;
    height: 40px;
    border: 1px solid #eee;
  }
}

.dropmenu-1 {
  height: 0;
}

.middle {
  margin-top: 30px;
  padding: 0 20px 0;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  background-color: #eee;
  border: 1px solid #ddd;
  line-height: 50px;

  & .select {
    float: right;
    margin-right: 20px;
  }

  & .button {
    float: right;
    margin-right: 20px;
    margin-top: 7px;
  }
}

.bottom {
  padding: 4px 20px 0;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  background-color: #eee;
  border: 1px solid #ddd;
}
</style>